import React from "react";
import {Card, LeftSeeMore, NewsListContainer, RightSeeMore} from "./style";
import NewsItem from "./NewListItem";
import {connect} from "react-redux";
import QueueAnim from 'rc-queue-anim';
import NoDataWindow from "@/common/window/NoDataWindow";
import Config from '@/config'
import {Col, Divider, Row} from "antd";


const NewsList = (props) => {

    const dataList = props.ArticleList;
    const settings = {
        infinite: false,
        speed: 500,
        slidesToShow: 2,
        // autoplay: true,
        // autoplaySpeed: 5000,
        slidesToScroll: 1,
        vertical: true,
        verticalSwiping: true,
        cssEase: "linear",
        responsive: [
            {
                breakpoint: 1350,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    autoplay: true,
                    speed: 500,
                    autoplaySpeed: 5000,
                    pauseOnHover: false,
                    adaptiveHeight: true,
                    initialSlide: 0,
                    cssEase: "linear",
                }
            },
        ]
    };
    return (
        <>
            <Divider orientation="left"
                     style={{
                         color: '#71b2ff',
                         borderColor: 'rgb(113,178,255)',
                         fontSize: '10px',
                         letterSpacing: '1.5px',
                         userSelect: 'none'
                     }}
                     plain>
                <Config.IconFont type={'icon-suoyouwenzhang'} style={{lineHeight: '20px', fontSize: '16px'}}/>
                <span style={{marginLeft: '5px', fontSize: '20px', lineHeight: '20px',fontWeight:600}}>游戏资讯</span>
            </Divider>
            <RightSeeMore>
                <Config.IconFont type={'icon-gengduo2'} style={{fontSize: '12px', marginRight: '5px'}}/>
                <span>查看更多</span>
            </RightSeeMore>
            {
                props.ArtPageCategory.map( cate => {
                    return <LeftSeeMore
                        key={cate.id}
                        className={props.selectCategory === cate.id ? 'selected' : null}
                        onClick={()=>{
                            if (props.selectCategory === cate.id){
                                props.handleSelectCategory({pageCategory:null})
                            }else{
                                props.handleSelectCategory({pageCategory:cate.id})
                            }

                        }}
                    >
                        <span>{cate.name}</span>
                    </LeftSeeMore>
                })
            }
            <NewsListContainer>
                <Row gutter={[8, 8]}>
                    {

                        dataList && dataList.length > 0 ? dataList.map((i, idx) => {
                                return (
                                    <Col span={8} key={idx}>
                                        <Card>
                                            <QueueAnim type="left" ease="easeOutQuart" leaveReverse>
                                                <NewsItem data={i}/>
                                            </QueueAnim>
                                        </Card>
                                    </Col>
                                )
                            }
                        ) : <NoDataWindow/>
                    }
                </Row>
            </NewsListContainer>
        </>
    );
}
export const mapStateToProps = (state) => {
    return {}
};
const mapDispatchToProps = (dispatch) => {
    return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(NewsList);
